<template>
  <section>

    <el-row style="margin:8px 0;font-weight: bold">
      <el-col :span="2"><span>属性：</span></el-col>
      <el-col :span="20">
        <el-tag size="small" style="margin:0 2px;" :key="index" v-for="(t,index) in tagList" :closable="tagList.length > 0 && propsList.length<=0" :disable-transitions="false" @close="handleClose(index)">
          {{t}}
        </el-tag>
        <el-input class="input-new-tag" v-if="inputVisible" v-model="tagVal" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"/>
        <i class="el-icon-check" @click="handleInputConfirm"></i>
        <el-button v-else v-show="propsList.length==0" class="button-new-tag" size="mini" @click="showInput"> + </el-button>
      </el-col>
    </el-row>
    <el-table size="mini" :data="goodsSkus">
      <el-table-column type="index" label="序号"/>
      <el-table-column prop="price" label="价格">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.price"></el-input>
          <div v-if="!scope.row.edit">{{scope.row.price}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="sn" label="产品编号" width="155" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.edit" @click='creatNumber(scope.row)' size="mini" type="text">生成</el-button>
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.sn"></el-input>
          <div size="mini" slot="reference">{{scope.row.sn}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="sn" label="业务类型" width="155" >
        <template slot-scope="scope">
          <business-type :disabled="!scope.row.edit" :code="scope.row.businessTypeCode" v-on:selType="scope.row.businessTypeCode = $event"></business-type>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="155">
        <template slot-scope="scope">
          <div class="btn">
            <i class="el-icon-check" style="color:green" @click="createSkuBtn(scope.row)" v-if="!scope.row.id" />
            <i :class="scope.row.edit?'el-icon-check':'el-icon-edit'" style="color:blue" @click="editSkuBtn(scope.row)" v-if="scope.row.id"/>
            <i class="el-icon-minus" @click="cancelSkuBtn(scope)" v-if="scope.row.edit" />
            <i class="el-icon-close" style="color:red" @click="delSkuBtn(scope)" v-if="scope.row.id && !scope.row.edit"/>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import businessType from '@/common/businessType'
  export default {
    name: "goodsSkus",
    components:{businessType},
    props:[''],
    data(){
      return{
        goodsSkus:[],
        tagList:[],
        propsList:[],
        inputVisible: false,
        tagVal:''
      }
    },
    methods: {
      handleInputConfirm() {
        let inputValue = this.tagVal.replace(/\s+/g,"")
        if (inputValue) {
          this.tagList.push(inputValue)
        }
        this.inputVisible = false
        this.tagVal = ''
      },
      showInput() {
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
        })
      },
      createSkuBtn(){
        console.log('创建sku')
      },
      editSkuBtn(){
        console.log('编辑sku')
      },
      cancelSkuBtn(){
        console.log('取消sku')
      },
      delSkuBtn(){
        console.log('删除sku')
      }
    }
  }
</script>

<style scoped>
  .input-new-tag{
    width:200px
  }
  .el-icon-check{
    color:green
  }
  .btn{
    font-size: 16px;
    width:20px;
    text-align: center;
  }
</style>
